<template>
  <div class="my-container">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>执行日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input v-model="page.cond.jobCode" placeholder="任务编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="page.cond.jobName" placeholder="按任务名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="page.cond.status" placeholder="按任务状态查询" clearable>
            <el-option label="正在执行" value="RUNNING"></el-option>
            <el-option label="执行失败" value="ERROR"></el-option>
            <el-option label="执行成功" value="SUCCESS"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            clearable
            v-model="dateRange"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list(true)">查询</el-button>
          <el-dropdown split-button type="warning" style="margin-left: 10px;" @command="clear">
            清除记录
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="day">1天之前</el-dropdown-item>
                <el-dropdown-item command="week">1周之前</el-dropdown-item>
                <el-dropdown-item command="month">1月之前</el-dropdown-item>
                <el-dropdown-item command="year">1年之前</el-dropdown-item>
                <el-dropdown-item command="all">全部清除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="result.records"
        border
        empty-text="暂无数据"
        height="100%">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="jobCode" label="任务编码" min-width="350"></el-table-column>
        <el-table-column prop="jobName" label="任务名称" min-width="300"></el-table-column>
        <el-table-column prop="status" label="执行状态" min-width="200">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.status==='RUNNING'">正在执行</el-tag>
            <el-tag type="success" v-if="scope.row.status==='SUCCESS'">执行成功</el-tag>
            <el-tag type="danger" v-if="scope.row.status==='ERROR'"
                    @click="stackTrace(scope.row)"
                    style="cursor:pointer;">执行失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" min-width="250"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="250"></el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="result.size"
        :total="result.total">
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="异常信息"
      ref="form-dialog"
      v-model="visible.stackTrace"
      :close-on-click-modal="false"
      width="80%">
      <div>
        <span v-html="stackTraceInfo"></span>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible.stackTrace = false">关闭</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "Index",
  data() {
    return {
      visible: {
        stackTrace: false
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
        orders: [
          { column: "create_time", asc: false }
        ],
        cond: {
          id: null,
          jobId: null,
          jobCode: null,
          jobName: null,
          status: null,
          startTime: null,
          stopTime: null,
        },
      },
      result: {},
      info: {
      },
      rules: {
      },
      dateRange: null,
      stackTraceInfo: "",
    };
  },
  mounted() {
    this.list();
  },
  watch: {
    dateRange(n, o) {
      this.page.cond.startTime = dayjs(n[0]).format("YYYY-MM-DD HH:mm:ss");
      this.page.cond.endTime = dayjs(n[1]).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  methods: {
    // 分页查询
    list(first) {
      if (first) {
        this.page.current = 1;
      }
      this.$http.post("/admin/sys/scheduler/record/list", this.page, res => {
        this.result = res.data;
      }, false, true, false);
    },
    // 清除
    clear(ago) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.post(`/admin/sys/scheduler/record/clear/${ago}`, {}, () => {
          this.list(true);
        }, true, true, true);
      });
    },
    // 查看异常堆栈信息
    stackTrace(row) {
      this.$http.post(`/admin/sys/scheduler/record/stackTrace/${row.id}`, {}, res => {
        this.stackTraceInfo = res.data.stackTrace;
        this.visible.stackTrace = true;
      }, false, true, true);
    },
    // 当前页切换
    changePage(current) {
      this.page.current = current;
      this.list();
    },
  }
};
</script>

<style lang="scss" scoped>
.my-container {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;

  .header {
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
  }

  .form {
    padding: 20px 20px 0 20px;
    font-size: 14px;
    text-align: left;
  }

  .content {
    flex: 1;
    height: 0;
  }

  .footer {
    padding: 5px;
  }
}
</style>